<template>
    <div>
        <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true" style="line-height:40px">&times;</span>
                        </button>
                        <h4 class="modal-title" id="gridSystemModalLabel">导入项目</h4>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-1">
                                <i class="fa fa-cloud-download m-span1" aria-hidden="true" style="float:right"></i>
                            </div>
                            <div class="col-md-11">
                                <span class="m-span1">下载模板</span>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-11 col-md-offset-1">
                                <span class="m-span2">为提高导入的成功率，请下载并使用系统提供的模板。</span>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-11 col-md-offset-1">
                                <button type="button" class="btn btn-block btn-default">下载模板</button>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-1">
                                <i class="fa fa-cloud-upload m-span1" aria-hidden="true" style="float:right"></i>
                            </div>
                            <div class="col-md-11">
                                <span class="m-span1">上传文件</span>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-11 col-md-offset-1">
                                <span class="m-span2">仅支持xlsx.，xls.，csv.，文件大小≤4M。</span>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-11 col-md-offset-1">
                                <input type="text" id="show-path" style="width:334px;height: 30px" :value="href" disabled="disabled" />
                                <button class="select" id="btn" @click="select">选择文件</button>
                                <input type="file" id="upload" style="display:none" @change="changes" />
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary">开始导入</button>
                    </div>
                </div>
                <!-- /.modal-content -->
            </div>
        </div>
    </div>
</template>

<script>
export default {
  data() {
    return {
      href: ""
    };
  },
  methods: {
    select() {
      document.getElementById("upload").click();
      console.log(document.getElementById("upload").value);
    },
    changes() {
      this.href = document.getElementById("upload").value;
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss">
.modal-dialog {
  width: 633px;
  margin-top: 195px;
  .modal-header {
    width: 100%;
    height: 40px;
    line-height: 20px;
    background-color: rgba(120, 144, 156, 1);
    padding: 0 15px;
    .modal-title {
      width: 94px;
      height: 40px;
      line-height: 40px;
      color: rgba(255, 255, 255, 1);
      font-size: 13px;
      text-align: left;
      font-family: Roboto;
    }
  }
  .m-span1 {
    line-height: 24px;
    color: #808080;
  }
  .m-span2 {
    color: #9e9e9e;
    line-height: 24px;
  }
  .btn-default {
    width: 81px;
    height: 30px;
    font-size: 12px;
    background: #78909c;
    color: white;
    margin: 10px 0;
  }
  .modal-footer {
    margin-top: 60px;
    .select {
      width: 81px;
      height: 30px;
      color: white;
      background: #78909c;
      border: none;
    }
    .btn-primary {
      background: #78909c;
    }
  }
}
</style>
